<template>
  <div
    v-if="show"
    class="fixed w-full h-full bg-mask-6 left-0 top-0 z-200 flex flex-col items-center justify-center"
  >
    <slot></slot>
    <div class="mt-20px cursor-pointer" @click="close">
      <img :src="CloseLoginIcon" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CloseLoginIcon from '@renderer/assets/closeLogin.svg'
const props = defineProps({
  defaultValue: {
    type: Boolean,
    default: false
  },
  value: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:value'])
const show = computed({
  get: () => props.value || props.defaultValue,
  set: (v) => {
    emits('update:value', v)
  }
})

const close = () => {
  show.value = false
}
</script>

<style scoped></style>
